import React, { Component } from 'react';
import Mutil from '../../../util/mm.js';
import Product from '../../../server/product-server.js';
import './category-selector.less';

const _mm = new Mutil();
const _product = new Product();


class CategorySelector extends Component{
	constructor(props){
		super(props);
		this.state={
			firstCategoryList : [],
			firstCategoryId   : 0,
			secondCategoryList: [],
			secondCategoryId  : 0
		}
	}
	componentDidMount(){
		this.loadFirstCategory();
	}
	componentWillReceiveProps(nextProps){
		let categoryIdChange = this.props.categoryId !== nextProps.categoryId,
			parsentCategoryChange = this.props.parentCategoryId !== nextProps.parentCategoryId;
		//数据没有发生变化的时候，不做处理
		if(!categoryIdChange && !parsentCategoryChange){
			return;
		}
		//如果只有一级品类
		if(nextProps.parentCategoryId === 0){
			this.setState({
				firstCategoryId : nextProps.categoryId,
				secondCategoryId : 0
			});
		}
		//如果有两集品类
		else{
			this.setState({
				firstCategoryId: nextProps.parentCategoryId,
				secondCategoryId: nextProps.categoryId
			}, ()=>{
				parsentCategoryChange && this.loadSecondCategory();
			});
		}

	}
	//加载一级分类
	loadFirstCategory(){
		_product.getCategoryList().then(res => {
			this.setState({
				firstCategoryList : res
			});
		}, errMsg => {
			_mm.errorTips(errMsg)
		});
	}
	//加载二级品类
	loadSecondCategory(){
		_product.getCategoryList(this.state.firstCategoryId).then(res => {
			this.setState({
				secondCategoryList : res
			});
		}, errMsg => {
			_mm.errorTips(errMsg)
		});
	}

	//一级品类的变化
	onFirstCategoryChange(e){
		if(this.props.readOnly){return;}
		let newValue = e.target.value || 0;
		this.setState({
			firstCategoryId   : newValue,
			secondCategoryId  : 0,
			secondCategoryList: []
		}, ()=>{
			//跟新二级品类
			this.loadSecondCategory();
			this.onPropsCategoryChange();
		})
	}

	//二级分类的变化
	onSecondCategoryChange(e){
		if(this.props.readOnly){return;}
		let newValue = e.target.value || 0;
		this.setState({
			secondCategoryId  : newValue
		}, ()=>{
			//跟新二级品类
			this.onPropsCategoryChange();
		})
	}
	//传给父组件选择的结果
	onPropsCategoryChange(){
		//判断props里的回调函数存在
		let categoryChangeable = typeof this.props.onCategoryChange === 'function';
		//如果有二级分类
		if(this.state.secondCategoryId){
			categoryChangeable && this.props.onCategoryChange(this.state.secondCategoryId, this.state.firstCategoryId);
		}
		//只有一级分类
		else{
			this.props.onCategoryChange(this.state.firstCategoryId, 0);
		}
	}
	render(){
		return(
			<div className="col-md-10">
			      <select className="form-control cate-select"
			      	value={this.state.firstCategoryId}
			      	onChange={(e)=>this.onFirstCategoryChange(e)}
			      	readOnly={this.props.readOnly}
			      >
			      	<option value="">请选择一级分类</option>
			      	{
			      		this.state.firstCategoryList.map(
			      		(category, index) =><option key={index} value={category.id}>{category.name}</option>

			      		)
			      	}
			      </select>
			      {this.state.secondCategoryList.length ?
			      (<select name="" className="form-control cate-select"
			      	value={this.state.secondCategoryId}
			      	onChange={(e)=>this.onSecondCategoryChange(e)}
			      	readOnly={this.props.readOnly}
			      	>
			      			      	<option value="">请选择二级分类</option>
			      			      	{
			      			      		this.state.secondCategoryList.map(
			      			      		(category, index) =><option key={index} value={category.id}>{category.name}</option>
			      
			      			      		)
			      			      	}
			      			      </select>) : null
			      }
		    </div>
		);
	}
}

export default CategorySelector;